/* ==========================================================
   VISITENKARTE STYLE.CSS
   RG DIGITALDRUCKFORUM GÖHRINGER

   KOMPLETTE DATEI
   Desktop zuerst
   Responsive ausschließlich ganz unten
========================================================== */


/* ==========================================================
   01
   GRUNDLAGEN
========================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}


html {
  overflow-x: hidden;
}


body#visitenkarten {

  --vk-red: #c5001a;
  --vk-red-light: #ff3046;

  --vk-bg: #101315;
  --vk-dark: #090b0c;
  --vk-soft: #171b1e;

  --vk-white: #ffffff;

  --vk-muted:
    rgba(255, 255, 255, 0.66);

  --vk-muted-soft:
    rgba(255, 255, 255, 0.46);

  --vk-line:
    rgba(255, 255, 255, 0.10);

  --vk-line-strong:
    rgba(255, 255, 255, 0.19);

  min-width: 320px;

  margin: 0;

  overflow-x: hidden;

  color: #ffffff;

  background: #000000;

  font-family:
    "Avenir Next",
    Avenir,
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
}


body#visitenkarten img {
  display: block;

  max-width: 100%;
}


body#visitenkarten button,
body#visitenkarten input,
body#visitenkarten textarea,
body#visitenkarten select {
  font: inherit;
}


body#visitenkarten ::selection {
  color: #ffffff;

  background:
    var(--vk-red);
}



/* ==========================================================
   02
   SEITENGRUNDGERÜST
========================================================== */

.vk-page {
  width: 100%;

  padding-top: 92px;

  overflow: hidden;

  background:
    var(--vk-bg);
}


.vk-shell {
  width: 100%;

  margin: 0;

  padding-right:
    var(
      --site-gutter,
      clamp(28px, 5vw, 92px)
    );

  padding-left:
    var(
      --site-gutter,
      clamp(28px, 5vw, 92px)
    );
}


.vk-section {
  position: relative;

  width: 100%;

  padding:
    94px 0;
}


.vk-section + .vk-section {
  border-top:
    1px solid
    rgba(255, 255, 255, 0.055);
}



/* ==========================================================
   03
   TYPOGRAFIE
========================================================== */

.vk-kicker {
  display: block;

  margin:
    0 0 14px;

  color:
    var(--vk-red-light);

  font-size: 0.74rem;

  font-weight: 900;

  line-height: 1.3;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}


.vk-section-heading {
  max-width: 900px;

  margin-bottom: 50px;
}


.vk-section-heading h2,
.vk-faq-heading h2,
.vk-final-card h2 {
  margin: 0;

  color: #ffffff;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.4rem
    );

  font-weight: 700;

  line-height: 1;

  letter-spacing:
    -0.045em;
}


.vk-section-heading > p:last-child {
  max-width: 760px;

  margin:
    20px 0 0;

  color:
    var(--vk-muted);

  font-size: 1rem;

  line-height: 1.72;
}



/* ==========================================================
   04
   BREADCRUMB
========================================================== */

.vk-breadcrumb {
  min-height: 54px;

  display: flex;

  align-items: center;

  gap: 9px;

  color:
    rgba(255, 255, 255, 0.48);

  background:
    var(--vk-bg);

  font-size: 0.76rem;

  font-weight: 650;
}


.vk-breadcrumb a {
  color: inherit;

  text-decoration: none;

  transition:
    color 0.25s ease;
}


.vk-breadcrumb a:hover,
.vk-breadcrumb a:focus-visible {
  color:
    var(--vk-red-light);
}


.vk-breadcrumb span {
  color:
    rgba(255, 255, 255, 0.23);
}


.vk-breadcrumb strong {
  color: #ffffff;
}



/* ==========================================================
   05
   HERO
========================================================== */

.vk-hero {
  position: relative;

  width: 100%;

  min-height: 650px;

  overflow: hidden;

  isolation: isolate;

  background: #080808;
}



/* ==========================================================
   HERO BILD
========================================================== */

.vk-hero-image {
  position: absolute;

  top: -4%;

  right: 0;

  z-index: 0;

  width: 63%;

  height: 108%;

  max-width: none;

  object-fit: cover;

  object-position:
    center right;

  opacity: 0.94;

  filter:
    brightness(0.95)
    contrast(1.04);

  transition:
    transform 6s ease,
    filter 0.6s ease;
}


.vk-hero:hover
.vk-hero-image {
  transform:
    scale(1.012);

  filter:
    brightness(1)
    contrast(1.04);
}



/* ==========================================================
   HERO OVERLAY
========================================================== */

.vk-hero-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:

    linear-gradient(
      90deg,
      #080808 0%,
      rgba(8, 8, 8, 0.99) 27%,
      rgba(8, 8, 8, 0.91) 43%,
      rgba(8, 8, 8, 0.55) 59%,
      rgba(8, 8, 8, 0.12) 80%,
      transparent 100%
    ),

    linear-gradient(
      180deg,
      rgba(8, 8, 8, 0.02),
      transparent 55%,
      rgba(8, 8, 8, 0.82) 100%
    );
}



/* ==========================================================
   HERO INNER
========================================================== */

.vk-hero-inner {
  position: relative;

  z-index: 2;

  min-height: 650px;

  padding-top: 52px;

  padding-bottom: 30px;

  display: flex;

  flex-direction: column;
}



/* ==========================================================
   HERO LEISTUNGEN
========================================================== */

.vk-hero-services {
  width: fit-content;

  margin:
    0 0 38px;

  padding: 0;

  display: flex;

  flex-wrap: wrap;

  gap: 34px;

  list-style: none;

  font-size: 0.78rem;

  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.vk-hero-service {
  position: relative;

  color:
    rgba(255, 255, 255, 0.40);

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}


.vk-hero-service::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -8px;

  width: 0;

  height: 2px;

  border-radius: 999px;

  background:
    var(--vk-red-light);

  transition:
    width 0.35s ease;
}


.vk-hero-service.active {
  color:
    var(--vk-red-light);

  transform:
    translateY(-2px);
}


.vk-hero-service.active::after {
  width: 100%;
}



/* ==========================================================
   HERO TEXT
========================================================== */

.vk-hero-copy {
  width:
    min(
      650px,
      53%
    );

  max-width: 650px;
}


.vk-hero-copy h1 {
  margin:
    0 0 28px;

  color: #ffffff;

  font-size:
    clamp(
      3rem,
      4.6vw,
      5.15rem
    );

  font-weight: 700;

  line-height: 0.95;

  letter-spacing:
    -0.055em;
}


.vk-changing-word {
  display: block;

  min-height: 1.05em;

  color:
    var(--vk-red-light);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}


.vk-changing-word.is-changing {
  opacity: 0;

  transform:
    translateY(10px);
}


.vk-changing-word.is-long {
  font-size: 0.74em;

  white-space: nowrap;
}


.vk-hero-text {
  max-width: 620px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.72);

  font-size: 1rem;

  line-height: 1.75;
}



/* ==========================================================
   HERO FACTS
========================================================== */

.vk-hero-facts {
  width:
    min(
      920px,
      100%
    );

  margin-top: auto;

  padding-top: 36px;

  display: grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0, 1fr)
    );

  border-top:
    1px solid
    rgba(255, 255, 255, 0.16);
}


.vk-hero-fact {
  position: relative;

  min-width: 0;

  min-height: 105px;

  padding:
    18px 26px;

  display: grid;

  grid-template-columns:
    38px
    minmax(0, 1fr);

  gap: 15px;

  align-items: start;

  transition:
    transform 0.35s ease,
    background 0.35s ease;
}


.vk-hero-fact:first-child {
  padding-left: 0;
}


.vk-hero-fact:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 18px;

  right: 0;

  bottom: 18px;

  width: 1px;

  background:
    rgba(255, 255, 255, 0.14);
}


.vk-hero-fact:hover {
  transform:
    translateY(-4px);

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, 0.08),
      transparent
    );
}


.vk-hero-icon {
  color:
    var(--vk-red-light);
}


.vk-hero-icon svg {
  width: 30px;

  height: 30px;

  display: block;

  stroke: currentColor;

  stroke-width: 1.7;

  stroke-linecap: round;

  stroke-linejoin: round;
}


.vk-hero-fact strong {
  display: block;

  margin-bottom: 5px;

  color: #ffffff;

  font-size: 0.92rem;

  line-height: 1.25;
}


.vk-hero-fact p {
  margin: 0;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 0.75rem;

  line-height: 1.5;
}



/* ==========================================================
   06
   KARTENINHALT

   FEST:
   LINKS = VISITENKARTE
   RECHTS = ANIMIERTE TEXTE
========================================================== */

.vk-content-section {
  background:

    radial-gradient(
      circle at 12% 20%,
      rgba(197, 0, 26, 0.08),
      transparent 30%
    ),

    var(--vk-bg);
}



/* ==========================================================
   KARTENINHALT GRID
========================================================== */

.vk-content-layout {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(420px, 0.95fr)
    minmax(430px, 1.05fr);

  gap:
    clamp(
      48px,
      5vw,
      88px
    );

  align-items: center;
}



/* ==========================================================
   LINKS
========================================================== */

.vk-content-preview {
  width: 100%;

  min-width: 0;
}


.vk-preview-stage {
  width: 100%;

  min-height: 470px;

  padding:
    42px 34px;

  display: grid;

  place-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--vk-line);

  border-radius: 26px;

  background:

    radial-gradient(
      circle at center,
      rgba(197, 0, 26, 0.12),
      transparent 48%
    ),

    linear-gradient(
      145deg,
      #191e21,
      #090b0c
    );

  perspective: 1300px;
}



/* ==========================================================
   VISITENKARTE
========================================================== */

.vk-preview-card {
  position: relative;

  width:
    min(
      500px,
      96%
    );

  aspect-ratio:
    85 / 55;

  overflow: hidden;

  color: #ffffff;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-radius: 13px;

  background:

    linear-gradient(
      135deg,
      transparent 0 68%,
      rgba(197, 0, 26, 0.60) 68.5% 74%,
      transparent 74.5%
    ),

    linear-gradient(
      150deg,
      #24282a,
      #070809 72%
    );

  box-shadow:
    0 35px 70px
    rgba(0, 0, 0, 0.48);

  transform:
    rotateX(5deg)
    rotateZ(-2deg);

  transition:
    transform 0.45s ease;
}


.vk-preview-stage:hover
.vk-preview-card {
  transform:
    rotateX(2deg)
    rotateZ(0deg)
    scale(1.025);
}



/* ==========================================================
   MARKIERBARE BEREICHE
========================================================== */

.vk-preview-element {
  position: absolute;

  z-index: 3;

  border:
    1px solid
    transparent;

  border-radius: 9px;

  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.35s ease;
}


.vk-preview-element.is-active {
  border-color:
    rgba(255, 48, 70, 0.95);

  background:
    rgba(197, 0, 26, 0.10);

  box-shadow:
    0 0 24px
    rgba(255, 48, 70, 0.20);

  transform:
    scale(1.025);
}



/* ==========================================================
   LOGO
========================================================== */

.vk-preview-logo {
  top: 7%;

  left: 7%;

  width: 39%;

  min-height: 76px;

  padding:
    8px 10px;

  display: flex;

  align-items: center;

  justify-content: flex-start;
}


.vk-preview-logo-image {
  width: 100%;

  height: auto;

  max-height: 72px;

  object-fit: contain;

  object-position:
    left center;

  pointer-events: none;

  user-select: none;
}



/* ==========================================================
   PERSON
========================================================== */

.vk-preview-person {
  left: 8%;

  bottom: 29%;

  max-width: 58%;

  padding:
    9px 11px;
}


.vk-preview-person strong {
  display: block;

  margin-bottom: 4px;

  color: #ffffff;

  font-size: 0.95rem;

  font-weight: 800;

  line-height: 1.15;
}


.vk-preview-person span {
  display: block;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 0.54rem;

  line-height: 1.4;
}



/* ==========================================================
   KONTAKT
========================================================== */

.vk-preview-contact {
  left: 8%;

  bottom: 7%;

  max-width: 66%;

  padding:
    8px 11px;

  display: grid;

  gap: 2px;
}


.vk-preview-contact span {
  color:
    rgba(255, 255, 255, 0.74);

  font-size: 0.50rem;

  line-height: 1.35;

  overflow-wrap: anywhere;
}



/* ==========================================================
   QR / DIGITAL
========================================================== */

.vk-preview-digital {
  right: 7%;

  bottom: 7%;

  padding: 8px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: flex-end;

  gap: 7px;

  text-align: center;
}


.vk-preview-qr-image {
  width: 68px;

  height: 68px;

  display: block;

  object-fit: contain;

  background: #ffffff;

  border:
    5px solid
    #ffffff;

  border-radius: 4px;

  box-shadow:
    0 8px 20px
    rgba(0, 0, 0, 0.22);

  pointer-events: none;

  user-select: none;
}


.vk-preview-digital small {
  display: block;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 0.47rem;

  font-weight: 750;

  line-height: 1.2;

  white-space: nowrap;
}



/* ==========================================================
   HINWEIS
========================================================== */

.vk-preview-note {
  margin:
    17px 0 0;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 0.72rem;

  line-height: 1.5;

  text-align: center;
}



/* ==========================================================
   RECHTS
   ANIMIERTE TEXTE
========================================================== */

.vk-content-list {
  width: 100%;

  display: grid;

  align-self: center;

  border-top:
    1px solid
    var(--vk-line);
}


.vk-content-row {
  position: relative;

  min-height: 122px;

  padding:
    22px 14px;

  display: grid;

  grid-template-columns:
    62px
    minmax(0, 1fr);

  gap: 18px;

  align-items: center;

  border-bottom:
    1px solid
    var(--vk-line);

  cursor: default;

  transition:
    padding-left 0.35s ease,
    background 0.35s ease;
}


.vk-content-row::after {
  content: "";

  position: absolute;

  left: 0;

  bottom: -1px;

  width: 0;

  height: 2px;

  background:
    var(--vk-red);

  transition:
    width 0.4s ease;
}


.vk-content-row:hover,
.vk-content-row:focus-visible,
.vk-content-row.is-active {
  outline: 0;

  padding-left: 24px;

  background:
    linear-gradient(
      90deg,
      rgba(197, 0, 26, 0.10),
      transparent 65%
    );
}


.vk-content-row:hover::after,
.vk-content-row:focus-visible::after,
.vk-content-row.is-active::after {
  width: 100%;
}


.vk-content-number {
  color: transparent;

  font-size: 1.35rem;

  font-weight: 900;

  -webkit-text-stroke:
    1px
    var(--vk-red-light);

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}


.vk-content-row.is-active
.vk-content-number {
  color:
    var(--vk-red-light);

  transform:
    translateX(4px);
}


.vk-content-row h3 {
  margin:
    0 0 8px;

  color:
    rgba(255, 255, 255, 0.62);

  font-size:
    clamp(
      1.2rem,
      1.5vw,
      1.6rem
    );

  font-weight: 750;

  line-height: 1.15;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}


.vk-content-row.is-active h3 {
  color: #ffffff;

  transform:
    translateX(4px);
}


.vk-content-row p {
  max-width: 650px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.45);

  font-size: 0.86rem;

  line-height: 1.6;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}


.vk-content-row.is-active p {
  color:
    rgba(255, 255, 255, 0.72);

  transform:
    translateX(4px);
}



/* ==========================================================
   07
   HOCH / QUER
========================================================== */

.vk-orientation-section {
  background:
    var(--vk-dark);
}


.vk-orientation-layout {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 22px;
}


.vk-orientation-card {
  min-width: 0;

  overflow: hidden;

  border:
    1px solid
    var(--vk-line);

  border-radius: 24px;

  background:
    rgba(255, 255, 255, 0.018);

  transition:
    border-color 0.35s ease,
    transform 0.35s ease,
    box-shadow 0.35s ease;
}


.vk-orientation-card:hover,
.vk-orientation-card.is-flipped {
  transform:
    translateY(-6px);

  border-color:
    rgba(255, 48, 70, 0.42);

  box-shadow:
    0 28px 65px
    rgba(0, 0, 0, 0.27);
}


.vk-orientation-card button {
  width: 100%;

  padding: 0;

  display: grid;

  grid-template-rows:
    390px auto;

  color: inherit;

  background: transparent;

  border: 0;

  cursor: pointer;
}



/* ==========================================================
   ORIENTATION STAGE
========================================================== */

.vk-orientation-stage {
  display: grid;

  place-items: center;

  perspective: 1400px;

  overflow: hidden;

  background:

    radial-gradient(
      circle at center,
      rgba(197, 0, 26, 0.10),
      transparent 52%
    ),

    linear-gradient(
      145deg,
      #1b2023,
      #101315
    );

  border-bottom:
    1px solid
    var(--vk-line);
}


.vk-orientation-object {
  position: relative;

  display: block;

  transform-style:
    preserve-3d;

  transition:
    transform 0.75s
    cubic-bezier(
      0.2,
      0.72,
      0.2,
      1
    );
}


.vk-landscape {
  width:
    min(
      390px,
      78%
    );

  aspect-ratio:
    85 / 55;

  transform:
    rotateX(4deg)
    rotateZ(-2deg);
}


.vk-portrait {
  height: 285px;

  aspect-ratio:
    55 / 85;

  transform:
    rotateX(4deg)
    rotateZ(2deg);
}


.vk-orientation-card:hover
.vk-orientation-object,

.vk-orientation-card.is-flipped
.vk-orientation-object {
  transform:
    rotateY(180deg);
}



/* ==========================================================
   KARTENSEITEN
========================================================== */

.vk-card-face {
  position: absolute;

  inset: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius: 10px;

  box-shadow:
    0 25px 48px
    rgba(0, 0, 0, 0.52);

  backface-visibility: hidden;

  -webkit-backface-visibility:
    hidden;
}


.vk-card-front {
  background:
    #080808;

  transform:
    rotateY(0deg)
    translateZ(0.5px);
}


.vk-card-front img {
  width: 100%;

  height: 100%;

  max-width: none;

  object-fit: contain;

  object-position: center;
}


.vk-card-back {
  padding: 28px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 8px;

  color: #ffffff;

  background:

    radial-gradient(
      circle at 50% 40%,
      rgba(197, 0, 26, 0.18),
      transparent 45%
    ),

    #070809;

  transform:
    rotateY(180deg)
    translateZ(0.5px);
}


.vk-back-rg {
  margin-bottom: 12px;

  color:
    var(--vk-red-light);

  font-size: 1.8rem;

  font-weight: 900;
}


.vk-card-back strong {
  color: #ffffff;

  font-size:
    clamp(
      1.35rem,
      2.5vw,
      2.2rem
    );
}


.vk-card-back small {
  color:
    rgba(255, 255, 255, 0.60);

  font-size: 0.72rem;
}



/* ==========================================================
   ORIENTATION BESCHRIFTUNG
========================================================== */

.vk-orientation-caption {
  padding:
    25px 28px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  text-align: left;
}


.vk-orientation-caption strong {
  color: #ffffff;

  font-size:
    clamp(
      1.35rem,
      2vw,
      1.85rem
    );
}


.vk-orientation-caption span {
  color:
    var(--vk-red-light);

  font-size: 0.65rem;

  font-weight: 900;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}



/* ==========================================================
   08
   MATERIAL & FORMAT

   01 = 350 g/m²
   02 = 85 × 55 mm
   03 = 2 Seiten
   04 = Hoch / Quer
========================================================== */

.vk-spec-section {
  background:
    var(--vk-bg);
}


/* ==========================================================
   HAUPTFLÄCHE
========================================================== */

.vk-spec-panel {
  position: relative;

  min-height: 550px;

  padding:
    clamp(
      46px,
      5.5vw,
      78px
    );

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(390px, 0.95fr);

  gap:
    clamp(
      48px,
      6vw,
      96px
    );

  align-items: center;

  overflow: hidden;

  border:
    1px solid
    var(--vk-line);

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 10% 30%,
      rgba(197, 0, 26, 0.14),
      transparent 38%
    ),
    radial-gradient(
      circle at 88% 50%,
      rgba(255, 255, 255, 0.025),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      #191e21,
      #090b0c 74%
    );

  box-shadow:
    0 28px 75px
    rgba(0, 0, 0, 0.30);
}



/* ==========================================================
   LINKER BEREICH
   WECHSELNDER TEXT
========================================================== */

.vk-spec-display {
  position: relative;

  z-index: 3;
}


.vk-spec-animation {
  min-height: 285px;

  display: flex;

  flex-direction: column;

  justify-content: center;
}


.vk-spec-animation strong {
  display: block;

  color: transparent;

  font-size:
    clamp(
      4rem,
      7.2vw,
      7rem
    );

  font-weight: 900;

  line-height: 0.9;

  letter-spacing:
    -0.065em;

  -webkit-text-stroke:
    2px
    rgba(255, 255, 255, 0.88);

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}


.vk-spec-animation > span {
  display: block;

  margin-top: 20px;

  color:
    var(--vk-red-light);

  font-size: 0.8rem;

  font-weight: 900;

  letter-spacing: 0.15em;

  text-transform: uppercase;

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}


.vk-spec-animation p {
  max-width: 560px;

  margin:
    15px 0 0;

  color:
    var(--vk-muted);

  line-height: 1.7;

  transition:
    opacity 0.28s ease,
    transform 0.28s ease;
}


/* TEXTWECHSEL */

.vk-spec-display.is-changing
.vk-spec-animation strong,

.vk-spec-display.is-changing
.vk-spec-animation > span,

.vk-spec-display.is-changing
.vk-spec-animation p {
  opacity: 0;

  transform:
    translateY(10px);
}



/* ==========================================================
   PROGRESS
========================================================== */

.vk-spec-progress {
  width:
    min(
      480px,
      100%
    );

  height: 3px;

  margin-top: 24px;

  overflow: hidden;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.12);
}


.vk-spec-progress-bar {
  display: block;

  width: 0;

  height: 100%;

  border-radius: inherit;

  background:
    var(--vk-red);
}



/* ==========================================================
   RECHTER BEREICH
   ANIMATIONEN
========================================================== */

.vk-spec-visual {
  position: relative;

  min-height: 410px;

  display: grid;

  place-items: center;

  overflow: hidden;
}


.vk-spec-visual::before {
  content: "";

  position: absolute;

  width: 350px;

  height: 350px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(197, 0, 26, 0.13),
      transparent 68%
    );

  pointer-events: none;
}



/* ==========================================================
   EINZELNE SZENEN
========================================================== */

.vk-spec-scene {
  position: absolute;

  inset: 0;

  z-index: 2;

  display: grid;

  place-items: center;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform:
    translateY(18px)
    scale(0.97);

  transition:
    opacity 0.45s ease,
    transform 0.45s ease,
    visibility 0.45s ease;
}


.vk-spec-scene.is-active {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0)
    scale(1);
}



/* ==========================================================
   GEMEINSAMES RG-LOGO
========================================================== */

.vk-spec-logo {
  display: block;

  height: auto;

  object-fit: contain;

  pointer-events: none;

  user-select: none;
}



/* ==========================================================
   01
   350 G/M²
   PAPIERSTÄRKE
========================================================== */

.vk-thickness-animation {
  position: relative;

  width: 360px;

  height: 300px;

  perspective: 1200px;
}


.vk-thickness-stack {
  position: absolute;

  top: 30px;

  left: 50%;

  width: 300px;

  height: 190px;

  transform:
    translateX(-50%)
    rotateX(56deg)
    rotateZ(-11deg);

  transform-style:
    preserve-3d;
}



/* ==========================================================
   EINZELNE PAPIERLAGEN
========================================================== */

.vk-thickness-stack span {
  position: absolute;

  inset: 0;

  opacity: 0;

  border:
    1px solid
    rgba(0, 0, 0, 0.18);

  border-radius: 7px;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #ddd9d0
    );

  box-shadow:
    0 7px 15px
    rgba(0, 0, 0, 0.18);
}


.vk-thickness-stack span:nth-child(1) {
  --vk-paper-offset: 36px;
}


.vk-thickness-stack span:nth-child(2) {
  --vk-paper-offset: 30px;
}


.vk-thickness-stack span:nth-child(3) {
  --vk-paper-offset: 24px;
}


.vk-thickness-stack span:nth-child(4) {
  --vk-paper-offset: 18px;
}


.vk-thickness-stack span:nth-child(5) {
  --vk-paper-offset: 12px;
}


.vk-thickness-stack span:nth-child(6) {
  --vk-paper-offset: 6px;
}


.vk-thickness-stack span:nth-child(7) {
  --vk-paper-offset: 0px;
}



/* ==========================================================
   PAPIER AUFBAUEN
========================================================== */

.vk-spec-scene-thickness.is-active
.vk-thickness-stack span {
  animation:
    vk-paper-build
    0.55s
    cubic-bezier(
      0.2,
      0.75,
      0.2,
      1
    )
    forwards;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(1) {
  animation-delay: 0.05s;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(2) {
  animation-delay: 0.15s;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(3) {
  animation-delay: 0.25s;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(4) {
  animation-delay: 0.35s;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(5) {
  animation-delay: 0.45s;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(6) {
  animation-delay: 0.55s;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-stack span:nth-child(7) {
  animation-delay: 0.65s;
}


@keyframes vk-paper-build {

  from {
    opacity: 0;

    transform:
      translateY(-26px);
  }


  to {
    opacity: 1;

    transform:
      translateY(
        var(--vk-paper-offset)
      );
  }

}



/* ==========================================================
   350 G/M² BESCHRIFTUNG
========================================================== */

.vk-thickness-measure {
  position: absolute;

  right: 0;

  bottom: 26px;

  display: flex;

  align-items: center;

  gap: 12px;

  opacity: 0;
}


.vk-spec-scene-thickness.is-active
.vk-thickness-measure {
  animation:
    vk-thickness-measure-in
    0.5s
    ease
    1s
    forwards;
}


.vk-thickness-measure-line {
  width: 62px;

  height: 1px;

  background:
    var(--vk-red-light);
}


.vk-thickness-measure strong {
  color:
    var(--vk-red-light);

  font-size: 0.8rem;

  font-weight: 900;

  letter-spacing: 0.08em;
}


@keyframes vk-thickness-measure-in {

  from {
    opacity: 0;

    transform:
      translateX(15px);
  }


  to {
    opacity: 1;

    transform:
      translateX(0);
  }

}



/* ==========================================================
   02
   85 × 55 MM
   ENDFORMAT
========================================================== */

.vk-size-animation {
  position: relative;

  width: 400px;

  height: 320px;
}



/* ==========================================================
   VISITENKARTE
========================================================== */

.vk-size-card {
  position: absolute;

  top: 50%;

  left: 50%;

  width: 300px;

  aspect-ratio:
    85 / 55;

  display: grid;

  place-items: center;

  overflow: hidden;

  opacity: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  border-radius: 10px;

  background:
    linear-gradient(
      135deg,
      transparent 0 68%,
      rgba(197, 0, 26, 0.72) 68.5% 74%,
      transparent 74.5%
    ),
    linear-gradient(
      145deg,
      #25292c,
      #08090a
    );

  box-shadow:
    0 28px 55px
    rgba(0, 0, 0, 0.38);

  transform:
    translate(-50%, -50%)
    scale(0.8);
}


.vk-size-card-logo {
  width: 125px;

  object-position:
    center;
}


.vk-spec-scene-size.is-active
.vk-size-card {
  animation:
    vk-size-card-in
    0.8s
    cubic-bezier(
      0.2,
      0.75,
      0.2,
      1
    )
    forwards;
}


@keyframes vk-size-card-in {

  from {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.8);
  }


  to {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1);
  }

}



/* ==========================================================
   GEMEINSAME MASSANGABE

   85 MM UND 55 MM HABEN EXAKT
   DIE GLEICHE OPTIK
========================================================== */

.vk-dimension {
  position: absolute;

  color:
    var(--vk-red-light);

  opacity: 0;
}


.vk-dimension strong {
  display: flex;

  align-items: center;

  justify-content: center;

  min-width: 54px;

  min-height: 24px;

  color:
    var(--vk-red-light);

  font-size: 0.72rem;

  font-weight: 900;

  line-height: 1;

  white-space: nowrap;
}


.vk-dimension-line,
.vk-dimension-cap {
  display: block;

  background:
    var(--vk-red-light);
}



/* ==========================================================
   85 MM
   WAAGERECHT
========================================================== */

.vk-dimension-width {
  left: 50%;

  bottom: 8px;

  width: 300px;

  display: grid;

  grid-template-columns:
    1px
    1fr
    auto
    1fr
    1px;

  align-items: center;

  gap: 8px;

  transform:
    translateX(-50%);
}


.vk-dimension-width
.vk-dimension-line {
  width: 100%;

  height: 1px;

  transform:
    scaleX(0);
}


.vk-dimension-width
.vk-dimension-cap {
  width: 1px;

  height: 10px;
}


.vk-spec-scene-size.is-active
.vk-dimension-width {
  animation:
    vk-width-measure-show
    0.35s
    ease
    0.8s
    forwards;
}


.vk-spec-scene-size.is-active
.vk-dimension-width
.vk-dimension-line {
  animation:
    vk-width-line
    0.6s
    ease
    0.95s
    forwards;
}


@keyframes vk-width-measure-show {

  from {
    opacity: 0;

    transform:
      translateX(-50%)
      translateY(8px);
  }


  to {
    opacity: 1;

    transform:
      translateX(-50%)
      translateY(0);
  }

}


@keyframes vk-width-line {

  from {
    transform:
      scaleX(0);
  }


  to {
    transform:
      scaleX(1);
  }

}



/* ==========================================================
   55 MM
   SENKRECHT

   TEXT BLEIBT NORMAL LESBAR.
   OPTIK ENTSPRICHT 85 MM.
========================================================== */

.vk-dimension-height {
  top: 50%;

  right: -20px;

  height: 195px;

  display: grid;

  grid-template-rows:
    1px
    1fr
    auto
    1fr
    1px;

  align-items: center;

  justify-items: center;

  gap: 8px;

  transform:
    translateY(-50%);
}


.vk-dimension-height
.vk-dimension-line {
  width: 1px;

  height: 100%;

  transform:
    scaleY(0);
}


.vk-dimension-height
.vk-dimension-cap {
  width: 10px;

  height: 1px;
}


.vk-dimension-height strong {
  min-width: 52px;

  min-height: 24px;

  /*
     TEXT BLEIBT WAAGERECHT
  */

  writing-mode:
    horizontal-tb;

  transform:
    none;
}


.vk-spec-scene-size.is-active
.vk-dimension-height {
  animation:
    vk-height-measure-show
    0.35s
    ease
    1.1s
    forwards;
}


.vk-spec-scene-size.is-active
.vk-dimension-height
.vk-dimension-line {
  animation:
    vk-height-line
    0.6s
    ease
    1.25s
    forwards;
}


@keyframes vk-height-measure-show {

  from {
    opacity: 0;

    transform:
      translateY(-50%)
      translateX(8px);
  }


  to {
    opacity: 1;

    transform:
      translateY(-50%)
      translateX(0);
  }

}


@keyframes vk-height-line {

  from {
    transform:
      scaleY(0);
  }


  to {
    transform:
      scaleY(1);
  }

}


/* ==========================================================
   03
   2 SEITEN
   VORDER- UND RÜCKSEITE

   STABILER FLIP:
   Die Karte klappt zusammen,
   Vorder- und Rückseite wechseln in der Mitte,
   danach klappt sie wieder auf.

   Dadurch gibt es keine Probleme mehr mit
   transparenter 3D-Rückseite / backface-visibility.
========================================================== */

.vk-sides-animation {
  position: relative;

  width: 340px;

  aspect-ratio:
    85 / 55;

  display: grid;

  place-items: center;
}


/* ==========================================================
   DREHENDE / KLAPPENDE KARTE
========================================================== */

.vk-sides-card {
  position: relative;

  width: 100%;

  height: 100%;

  opacity: 0;

  transform-origin:
    center center;

  will-change:
    transform,
    opacity;
}


/* ==========================================================
   SZENE AKTIV
========================================================== */

.vk-spec-scene-sides.is-active
.vk-sides-card {
  animation:
    vk-sides-card-flip
    3.3s
    ease-in-out
    forwards;
}



/* ==========================================================
   GEMEINSAME KARTENSEITE

   Vorder- und Rückseite liegen exakt
   übereinander.
========================================================== */

.vk-sides-face {
  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.20);

  border-radius: 11px;

  box-shadow:
    0 28px 55px
    rgba(0, 0, 0, 0.40);
}



/* ==========================================================
   VORDERSEITE
========================================================== */

.vk-sides-front {
  z-index: 2;

  padding: 24px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  opacity: 1;

  visibility: visible;

  color:
    #ffffff;

  background-color:
    #090a0b;

  background-image:
    linear-gradient(
      135deg,
      transparent 0 68%,
      rgba(197, 0, 26, 0.78) 68.5% 74%,
      transparent 74.5%
    ),

    linear-gradient(
      145deg,
      #24282a 0%,
      #070809 100%
    );
}



/* ==========================================================
   LOGO VORDERSEITE
========================================================== */

.vk-sides-logo {
  width: 130px;

  height: auto;

  display: block;

  object-fit: contain;

  object-position:
    left center;
}



/* ==========================================================
   KONTAKTDATEN VORDERSEITE
========================================================== */

.vk-sides-contact {
  display: flex;

  flex-direction: column;

  gap: 3px;
}


.vk-sides-contact strong {
  display: block;

  color:
    #ffffff;

  font-size: 1rem;

  line-height: 1.2;
}


.vk-sides-contact span {
  display: block;

  color:
    rgba(255, 255, 255, 0.62);

  font-size: 0.7rem;

  line-height: 1.4;
}



/* ==========================================================
   RÜCKSEITE

   ECHTE VOLLFLÄCHIGE SCHWARZE KARTE
========================================================== */

.vk-sides-back {
  z-index: 1;

  padding: 25px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 14px;

  opacity: 0;

  visibility: hidden;

  color:
    #ffffff;

  background:
    #000000;
}



/* ==========================================================
   LOGO RÜCKSEITE
========================================================== */

.vk-sides-back-logo {
  width: 145px;

  height: auto;

  display: block;

  object-fit: contain;

  object-position:
    center;
}



/* ==========================================================
   TEXT RÜCKSEITE
========================================================== */

.vk-sides-back > span {
  display: block;

  color:
    var(--vk-red-light);

  font-size: 0.68rem;

  font-weight: 900;

  line-height: 1.2;

  letter-spacing:
    0.14em;

  text-align: center;

  text-transform:
    uppercase;
}



/* ==========================================================
   VORDERSEITE AUSBLENDEN

   Sie bleibt bis zum Zusammenklappen sichtbar.
   Danach verschwindet sie komplett.
========================================================== */

.vk-spec-scene-sides.is-active
.vk-sides-front {
  animation:
    vk-sides-front-face
    3.3s
    linear
    forwards;
}



/* ==========================================================
   RÜCKSEITE EINBLENDEN

   Sie erscheint erst,
   wenn die Karte in der Mitte zusammengeklappt ist.
========================================================== */

.vk-spec-scene-sides.is-active
.vk-sides-back {
  animation:
    vk-sides-back-face
    3.3s
    linear
    forwards;
}



/* ==========================================================
   KARTEN-FLIP

   0–35 %
   Vorderseite

   35–50 %
   Karte klappt zu

   50 %
   Vorderseite / Rückseite wechseln

   50–65 %
   Karte klappt wieder auf

   Danach bleibt Rückseite kurz sichtbar

   Am Ende Wechsel zurück zur Vorderseite
========================================================== */

@keyframes vk-sides-card-flip {

  0% {
    opacity: 0;

    transform:
      scaleX(0.82)
      scaleY(0.82);
  }


  12% {
    opacity: 1;

    transform:
      scaleX(1)
      scaleY(1);
  }


  36% {
    opacity: 1;

    transform:
      scaleX(1)
      scaleY(1);
  }


  48% {
    opacity: 1;

    transform:
      scaleX(0.03)
      scaleY(1);
  }


  52% {
    opacity: 1;

    transform:
      scaleX(0.03)
      scaleY(1);
  }


  64% {
    opacity: 1;

    transform:
      scaleX(1)
      scaleY(1);
  }


  82% {
    opacity: 1;

    transform:
      scaleX(1)
      scaleY(1);
  }


  94% {
    opacity: 1;

    transform:
      scaleX(0.03)
      scaleY(1);
  }


  97% {
    opacity: 1;

    transform:
      scaleX(0.03)
      scaleY(1);
  }


  100% {
    opacity: 1;

    transform:
      scaleX(1)
      scaleY(1);
  }

}



/* ==========================================================
   VORDERSEITE SICHTBARKEIT
========================================================== */

@keyframes vk-sides-front-face {

  0%,
  49% {
    opacity: 1;

    visibility: visible;
  }


  50%,
  96% {
    opacity: 0;

    visibility: hidden;
  }


  97%,
  100% {
    opacity: 1;

    visibility: visible;
  }

}



/* ==========================================================
   RÜCKSEITE SICHTBARKEIT
========================================================== */

@keyframes vk-sides-back-face {

  0%,
  49% {
    opacity: 0;

    visibility: hidden;
  }


  50%,
  96% {
    opacity: 1;

    visibility: visible;
  }


  97%,
  100% {
    opacity: 0;

    visibility: hidden;
  }

}



/* ==========================================================
   04
   HOCH / QUER
========================================================== */

.vk-format-animation {
  width: 390px;

  min-height: 340px;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 28px;
}



/* ==========================================================
   FORMATKARTE

   WICHTIG:
   DIE KARTE WIRD NICHT GEDREHT.

   NUR BREITE UND HÖHE ÄNDERN SICH.

   DADURCH BLEIBT DAS LOGO IMMER
   RICHTIG HERUM.
========================================================== */

.vk-format-card {
  position: relative;

  padding: 20px;

  display: flex;

  flex-direction: column;

  justify-content:
    space-between;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.23);

  border-radius: 11px;

  background:
    linear-gradient(
      135deg,
      transparent 0 68%,
      rgba(197, 0, 26, 0.75) 68.5% 74%,
      transparent 74.5%
    ),
    linear-gradient(
      145deg,
      #24282a,
      #070809
    );

  box-shadow:
    0 28px 55px
    rgba(0, 0, 0, 0.40);

  transition:
    width 0.85s
    cubic-bezier(
      0.65,
      0,
      0.35,
      1
    ),
    height 0.85s
    cubic-bezier(
      0.65,
      0,
      0.35,
      1
    ),
    padding 0.85s ease;
}



/* ==========================================================
   HOCHFORMAT
========================================================== */

.vk-format-card.is-portrait {
  width: 185px;

  height: 286px;
}


.vk-format-card.is-portrait
.vk-format-logo {
  width: 112px;
}



/* ==========================================================
   QUERFORMAT
========================================================== */

.vk-format-card.is-landscape {
  width: 325px;

  height: 210px;
}


.vk-format-card.is-landscape
.vk-format-logo {
  width: 132px;
}



/* ==========================================================
   LOGO
   BLEIBT IMMER AUFRECHT
========================================================== */

.vk-format-logo {
  height: auto;

  object-fit: contain;

  object-position:
    left center;

  transition:
    width 0.7s ease;
}



/* ==========================================================
   TEXT AUF DER KARTE
========================================================== */

.vk-format-copy {
  display: flex;

  flex-direction: column;

  align-items:
    flex-start;

  gap: 3px;
}


.vk-format-copy strong {
  color:
    #ffffff;

  font-size: 0.92rem;

  line-height: 1.2;
}


.vk-format-copy span {
  color:
    rgba(255, 255, 255, 0.60);

  font-size: 0.68rem;

  line-height: 1.3;
}



/* ==========================================================
   HOCH / QUER BESCHRIFTUNG
========================================================== */

.vk-format-labels {
  display: flex;

  gap: 34px;

  color:
    rgba(255, 255, 255, 0.35);

  font-size: 0.65rem;

  font-weight: 900;

  letter-spacing: 0.12em;

  text-transform: uppercase;
}


.vk-format-labels span {
  position: relative;

  transition:
    color 0.3s ease;
}


.vk-format-labels span::after {
  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: -7px;

  height: 2px;

  background:
    var(--vk-red-light);

  transform:
    scaleX(0);

  transition:
    transform 0.3s ease;
}


.vk-format-labels span.is-active {
  color:
    var(--vk-red-light);
}


.vk-format-labels span.is-active::after {
  transform:
    scaleX(1);
}



/* ==========================================================
   09
   DRUCKDATEN
========================================================== */

.vk-print-section {
  background:
    var(--vk-dark);
}


.vk-print-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  gap: 18px;
}


.vk-print-card {
  position: relative;

  min-width: 0;

  min-height: 350px;

  padding:
    27px 25px;

  overflow: hidden;

  border:
    1px solid
    var(--vk-line);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.018);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}


.vk-print-card::before {
  content: "";

  position: absolute;

  inset: 0;

  opacity: 0;

  background:
    linear-gradient(
      180deg,
      rgba(197, 0, 26, 0.10),
      transparent 52%
    );

  transition:
    opacity 0.35s ease;
}


.vk-print-card:hover,
.vk-print-card.is-active {
  transform:
    translateY(-7px);

  border-color:
    rgba(255, 48, 70, 0.45);

  box-shadow:
    0 25px 55px
    rgba(0, 0, 0, 0.25);
}


.vk-print-card:hover::before,
.vk-print-card.is-active::before {
  opacity: 1;
}


.vk-print-card > * {
  position: relative;

  z-index: 2;
}



/* ==========================================================
   DRUCKDATEN ICON
========================================================== */

.vk-print-icon {
  width: 66px;

  height: 66px;

  margin-bottom: 35px;

  display: grid;

  place-items: center;

  color:
    var(--vk-red-light);

  border:
    1px solid
    rgba(255, 255, 255, 0.14);

  border-radius: 50%;

  background:
    rgba(255, 255, 255, 0.025);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}


.vk-print-card:hover
.vk-print-icon,

.vk-print-card.is-active
.vk-print-icon {
  transform:
    scale(1.07);

  border-color:
    rgba(255, 48, 70, 0.62);

  background:
    rgba(197, 0, 26, 0.10);
}


.vk-print-icon svg {
  width: 34px;

  height: 34px;

  display: block;

  stroke: currentColor;

  stroke-width: 1.6;

  stroke-linecap: round;

  stroke-linejoin: round;
}



/* ==========================================================
   DRUCKDATEN TEXT
========================================================== */

.vk-print-number {
  display: block;

  margin-bottom: 9px;

  color:
    var(--vk-red-light);

  font-size: 0.66rem;

  font-weight: 900;

  letter-spacing: 0.14em;
}


.vk-print-card h3 {
  margin:
    0 0 16px;

  color: #ffffff;

  font-size: 1.25rem;
}


.vk-print-card > strong {
  display: block;

  margin-bottom: 17px;

  color: transparent;

  font-size:
    clamp(
      2.2rem,
      3vw,
      3.3rem
    );

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -0.04em;

  -webkit-text-stroke:
    1px
    rgba(255, 255, 255, 0.86);
}


.vk-print-card p {
  margin: 0;

  color:
    var(--vk-muted);

  font-size: 0.86rem;

  line-height: 1.62;
}


.vk-print-note {
  margin:
    28px 0 0;

  color:
    rgba(255, 255, 255, 0.50);

  font-size: 0.88rem;

  line-height: 1.6;
}



/* ==========================================================
   10
   FAQ
========================================================== */

.vk-faq-section {
  background:
    var(--vk-bg);
}


.vk-faq-heading {
  max-width: 900px;

  margin-bottom: 48px;
}


.vk-faq-list {
  border-top:
    1px solid
    var(--vk-line);
}


.vk-faq-item {
  border-bottom:
    1px solid
    var(--vk-line);
}


.vk-faq-item summary {
  padding:
    25px 0;

  display: grid;

  grid-template-columns:
    1fr
    34px;

  gap: 20px;

  align-items: center;

  color: #ffffff;

  cursor: pointer;

  list-style: none;

  font-size:
    clamp(
      1.03rem,
      1.5vw,
      1.23rem
    );

  font-weight: 700;

  line-height: 1.4;
}


.vk-faq-item
summary::-webkit-details-marker {
  display: none;
}


.vk-faq-item summary b {
  width: 30px;

  height: 30px;

  display: grid;

  place-items: center;

  color:
    var(--vk-red-light);

  font-size: 1.45rem;

  font-weight: 400;

  transition:
    transform 0.25s ease;
}


.vk-faq-item[open]
summary b {
  transform:
    rotate(45deg);
}


.vk-faq-item > p {
  max-width: 900px;

  margin: 0;

  padding:
    0 54px 28px 0;

  color:
    var(--vk-muted);

  line-height: 1.72;
}



/* ==========================================================
   11
   CTA
========================================================== */

.vk-final-section {
  padding-top: 72px;

  padding-bottom: 105px;

  background:
    var(--vk-dark);
}


.vk-final-card {
  position: relative;

  padding:
    clamp(
      42px,
      5vw,
      68px
    );

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.09);

  border-radius: 28px;

  background:

    radial-gradient(
      circle at 5% 20%,
      rgba(197, 0, 26, 0.13),
      transparent 38%
    ),

    rgba(255, 255, 255, 0.025);

  box-shadow:
    0 30px 70px
    rgba(0, 0, 0, 0.22);
}


.vk-final-card::before,
.vk-final-card::after {
  display: none !important;

  content: none !important;
}


.vk-final-card > p:not(.vk-kicker) {
  max-width: 720px;

  margin:
    22px 0 0;

  color:
    var(--vk-muted);

  line-height: 1.7;
}


.vk-final-button {
  min-height: 56px;

  margin-top: 30px;

  padding:
    16px 29px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  color:
    #ffffff !important;

  background:
    #f10d1b;

  border:
    1px solid
    #f10d1b;

  border-radius: 999px;

  box-shadow:
    0 15px 35px
    rgba(241, 13, 27, 0.24);

  font-size: 0.94rem;

  font-weight: 850;

  text-decoration: none;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease;
}


.vk-final-button:hover,
.vk-final-button:focus-visible {
  color:
    #ffffff !important;

  background:
    #c5001a;

  transform:
    translateY(-3px);

  box-shadow:
    0 20px 42px
    rgba(241, 13, 27, 0.32);
}



/* ==========================================================
   12
   FOOTER
========================================================== */

body#visitenkarten
.footer
.footer-email {
  color: inherit;

  font-weight: 800;

  text-decoration: none;

  transition:
    color 0.25s ease;
}


body#visitenkarten
.footer
.footer-email:hover,

body#visitenkarten
.footer
.footer-email:focus-visible {
  color:
    var(--red-light) !important;
}



/* ==========================================================
   13
   RESPONSIVE

   AB HIER NUR RESPONSIVE
========================================================== */


/* ==========================================================
   1180 PX
========================================================== */

@media (max-width: 1180px) {

  .vk-page {
    padding-top: 86px;
  }


  /* KARTENINHALT BLEIBT LINKS / RECHTS */

  .vk-content-layout {
    grid-template-columns:
      minmax(340px, 0.95fr)
      minmax(370px, 1.05fr);

    gap: 38px;
  }


  .vk-preview-stage {
    min-height: 405px;

    padding:
      30px 22px;
  }


  .vk-content-row {
    min-height: 112px;

    padding:
      20px 10px;

    grid-template-columns:
      50px
      minmax(0, 1fr);

    gap: 14px;
  }


  .vk-content-row:hover,
  .vk-content-row:focus-visible,
  .vk-content-row.is-active {
    padding-left: 18px;
  }


  .vk-content-row h3 {
    font-size: 1.25rem;
  }


  .vk-content-row p {
    font-size: 0.82rem;
  }


  /* MATERIAL */

  .vk-spec-panel {
    grid-template-columns:
      minmax(0, 0.95fr)
      minmax(350px, 1.05fr);

    gap: 36px;

    padding:
      50px 40px;
  }


  .vk-spec-animation strong {
    font-size:
      clamp(
        3.7rem,
        7vw,
        6rem
      );
  }


  .vk-spec-visual {
    min-height: 370px;
  }


  /* DRUCKDATEN */

  .vk-print-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }

}



/* ==========================================================
   980 PX
   TABLET – KARTENINHALT BLEIBT ZWEISPALTIG
========================================================== */

@media (max-width: 980px) {

  .vk-page {
    padding-top: 82px;
  }


  /* HERO */

  .vk-hero,
  .vk-hero-inner {
    min-height: 680px;
  }


  .vk-hero-image {
    width: 74%;

    right: -7%;
  }


  .vk-hero-copy {
    width:
      min(
        610px,
        64%
      );
  }


  /* KARTENINHALT */

  .vk-content-layout {
    grid-template-columns:
      minmax(300px, 0.95fr)
      minmax(330px, 1.05fr);

    gap: 26px;
  }


  .vk-preview-stage {
    min-height: 355px;

    padding:
      26px 16px;
  }


  .vk-preview-logo {
    width: 42%;

    min-height: 58px;
  }


  .vk-preview-logo-image {
    max-height: 56px;
  }


  .vk-preview-person {
    left: 7%;

    bottom: 29%;
  }


  .vk-preview-contact {
    left: 7%;

    bottom: 6%;
  }


  .vk-preview-digital {
    right: 5%;

    bottom: 6%;
  }


  .vk-preview-qr-image {
    width: 56px;

    height: 56px;

    border-width: 4px;
  }


  .vk-content-row {
    min-height: 102px;

    padding:
      16px 6px;

    grid-template-columns:
      42px
      minmax(0, 1fr);

    gap: 11px;
  }


  .vk-content-row:hover,
  .vk-content-row:focus-visible,
  .vk-content-row.is-active {
    padding-left: 12px;
  }


  .vk-content-number {
    font-size: 1.05rem;
  }


  .vk-content-row h3 {
    margin-bottom: 5px;

    font-size: 1rem;
  }


  .vk-content-row p {
    font-size: 0.74rem;

    line-height: 1.5;
  }


  /* ORIENTATION */

  .vk-orientation-layout {
    grid-template-columns: 1fr;
  }


  /* MATERIAL */

  .vk-spec-panel {
    grid-template-columns:
      minmax(0, 0.9fr)
      minmax(315px, 1.1fr);

    gap: 28px;

    padding:
      44px 30px;
  }


  .vk-spec-animation strong {
    font-size:
      clamp(
        3.3rem,
        7vw,
        5.2rem
      );
  }


  .vk-spec-visual {
    min-height: 345px;
  }


  .vk-thickness-stack {
    width: 270px;

    height: 180px;
  }


  .vk-size-card {
    width: 265px;
  }


  .vk-size-width {
    width: 265px;
  }


  .vk-size-height {
    height: 170px;

    right: 0;
  }


  .vk-sides-stage {
    width: 280px;
  }


  .vk-orientation-demo {
    width: 165px;

    height: 255px;
  }

}



/* ==========================================================
   820 PX
   KLEINES TABLET – IMMER NOCH LINKS / RECHTS
========================================================== */

@media (max-width: 820px) {

  .vk-content-layout {
    grid-template-columns:
      minmax(260px, 0.95fr)
      minmax(285px, 1.05fr);

    gap: 18px;
  }


  .vk-preview-stage {
    min-height: 315px;

    padding:
      20px 12px;

    border-radius: 22px;
  }


  .vk-preview-logo {
    top: 6%;

    left: 6%;

    width: 42%;

    min-height: 0;

    padding: 5px;
  }


  .vk-preview-logo-image {
    max-height: 46px;
  }


  .vk-preview-person {
    left: 6%;

    bottom: 29%;

    padding: 5px;
  }


  .vk-preview-person strong {
    font-size: 0.72rem;
  }


  .vk-preview-person span {
    font-size: 0.41rem;
  }


  .vk-preview-contact {
    left: 6%;

    bottom: 6%;

    padding: 5px;
  }


  .vk-preview-contact span {
    font-size: 0.38rem;
  }


  .vk-preview-digital {
    right: 5%;

    bottom: 6%;

    padding: 4px;

    gap: 4px;
  }


  .vk-preview-qr-image {
    width: 46px;

    height: 46px;

    border-width: 3px;
  }


  .vk-preview-digital small {
    font-size: 0.34rem;
  }


  .vk-content-row {
    min-height: 90px;

    padding:
      13px 4px;

    grid-template-columns:
      33px
      minmax(0, 1fr);

    gap: 8px;
  }


  .vk-content-row:hover,
  .vk-content-row:focus-visible,
  .vk-content-row.is-active {
    padding-left: 9px;
  }


  .vk-content-number {
    font-size: 0.9rem;
  }


  .vk-content-row h3 {
    margin-bottom: 4px;

    font-size: 0.89rem;
  }


  .vk-content-row p {
    font-size: 0.66rem;

    line-height: 1.43;
  }


  /* MATERIAL DARF AUF KLEINEM TABLET UNTEREINANDER */

  .vk-spec-panel {
    grid-template-columns: 1fr;

    gap: 22px;
  }


  .vk-spec-animation {
    min-height: 220px;
  }


  .vk-spec-visual {
    min-height: 350px;
  }

}



/* ==========================================================
   700 PX
========================================================== */

@media (max-width: 700px) {

  .vk-page {
    padding-top: 76px;
  }


  .vk-breadcrumb {
    display: none;
  }


  .vk-section {
    padding:
      68px 0;
  }


  .vk-section-heading,
  .vk-faq-heading {
    margin-bottom: 34px;
  }


  .vk-section-heading h2,
  .vk-faq-heading h2,
  .vk-final-card h2 {
    font-size:
      clamp(
        2.15rem,
        10.5vw,
        3.6rem
      );

    line-height: 1.08;
  }


  /* HERO */

  .vk-hero,
  .vk-hero-inner {
    min-height: 820px;
  }


  .vk-hero-inner {
    padding-top: 42px;

    padding-bottom: 22px;
  }


  .vk-hero-image {
    top: auto;

    right: -23%;

    bottom: 0;

    width: 132%;

    height: 59%;

    object-position:
      65% center;

    opacity: 0.49;

    filter:
      brightness(0.72)
      contrast(1.04);
  }


  .vk-hero-overlay {
    background:
      linear-gradient(
        180deg,
        #080808 0%,
        rgba(8, 8, 8, 0.98) 37%,
        rgba(8, 8, 8, 0.77) 56%,
        rgba(8, 8, 8, 0.40) 72%,
        #080808 100%
      );
  }


  .vk-hero-services {
    gap:
      18px 22px;

    margin-bottom: 35px;

    font-size: 0.64rem;
  }


  .vk-hero-copy {
    width: 100%;
  }


  .vk-hero-copy h1 {
    font-size:
      clamp(
        2.9rem,
        14vw,
        4.4rem
      );
  }


  .vk-changing-word.is-long {
    font-size: 0.70em;

    white-space: normal;
  }


  .vk-hero-text {
    max-width: 96%;

    font-size: 0.9rem;
  }


  .vk-hero-facts {
    grid-template-columns: 1fr;

    margin-top: 40px;

    padding-top: 12px;
  }


  .vk-hero-fact,
  .vk-hero-fact:first-child {
    min-height: 0;

    padding:
      14px 2px;

    grid-template-columns:
      36px
      minmax(0, 1fr);
  }


  .vk-hero-fact:not(:last-child)::after {
    top: auto;

    right: 0;

    bottom: 0;

    left: 0;

    width: auto;

    height: 1px;
  }


  /* KARTENINHALT BLEIBT NOCH ZWEISPALTIG */

  .vk-content-layout {
    grid-template-columns:
      minmax(230px, 0.95fr)
      minmax(250px, 1.05fr);

    gap: 16px;
  }


  .vk-preview-stage {
    min-height: 285px;

    padding:
      16px 9px;
  }


  .vk-content-row {
    min-height: 82px;

    padding:
      10px 3px;

    grid-template-columns:
      29px
      minmax(0, 1fr);

    gap: 7px;
  }


  .vk-content-row:hover,
  .vk-content-row:focus-visible,
  .vk-content-row.is-active {
    padding-left: 7px;
  }


  .vk-content-number {
    font-size: 0.8rem;
  }


  .vk-content-row h3 {
    font-size: 0.82rem;
  }


  .vk-content-row p {
    font-size: 0.60rem;

    line-height: 1.4;
  }


  /* ORIENTATION */

  .vk-orientation-card button {
    grid-template-rows:
      300px auto;
  }


  .vk-landscape {
    width: 82%;
  }


  .vk-portrait {
    height: 225px;
  }


  .vk-orientation-caption {
    padding:
      22px 20px;

    align-items: flex-start;

    flex-direction: column;

    gap: 6px;
  }


  /* MATERIAL */

  .vk-spec-panel {
    min-height: 0;

    padding:
      34px 24px;
  }


  .vk-spec-animation strong {
    font-size:
      clamp(
        3.1rem,
        14vw,
        5.3rem
      );
  }


  .vk-spec-visual {
    min-height: 325px;
  }


  .vk-thickness-stack {
    width: 255px;

    height: 170px;
  }


  .vk-size-card {
    width: 255px;
  }


  .vk-size-width {
    width: 255px;
  }


  .vk-size-height {
    height: 165px;
  }


  .vk-sides-stage {
    width: 260px;
  }


  .vk-orientation-demo {
    width: 155px;

    height: 240px;
  }


  .vk-orientation-labels {
    gap: 25px;

    font-size: 0.58rem;
  }


  /* DRUCKDATEN */

  .vk-print-grid {
    grid-template-columns: 1fr;
  }


  .vk-print-card {
    min-height: 0;

    padding:
      26px 22px;
  }


  .vk-print-icon {
    margin-bottom: 24px;
  }


  /* FAQ */

  .vk-faq-item > p {
    padding-right: 0;
  }


  /* CTA */

  .vk-final-section {
    padding-top: 58px;

    padding-bottom: 74px;
  }


  .vk-final-card {
    padding:
      34px 24px;
  }


  .vk-final-button {
    width: 100%;
  }

}



/* ==========================================================
   620 PX
   ERST JETZT KARTENINHALT UNTEREINANDER
========================================================== */

@media (max-width: 620px) {

  .vk-content-layout {
    grid-template-columns: 1fr;

    gap: 38px;
  }


  .vk-content-preview {
    width: 100%;

    max-width: 560px;

    margin:
      0 auto;
  }


  .vk-preview-stage {
    min-height: 335px;

    padding:
      24px 14px;
  }


  .vk-preview-card {
    width:
      min(
        500px,
        96%
      );
  }


  .vk-preview-logo {
    top: 7%;

    left: 7%;

    width: 39%;

    padding:
      8px 10px;
  }


  .vk-preview-logo-image {
    max-height: 58px;
  }


  .vk-preview-person {
    left: 8%;

    bottom: 29%;

    padding:
      7px 9px;
  }


  .vk-preview-person strong {
    font-size: 0.82rem;
  }


  .vk-preview-person span {
    font-size: 0.47rem;
  }


  .vk-preview-contact {
    left: 8%;

    bottom: 7%;

    padding:
      7px 9px;
  }


  .vk-preview-contact span {
    font-size: 0.44rem;
  }


  .vk-preview-digital {
    right: 7%;

    bottom: 7%;

    padding: 6px;
  }


  .vk-preview-qr-image {
    width: 56px;

    height: 56px;

    border-width: 4px;
  }


  .vk-preview-digital small {
    font-size: 0.40rem;
  }


  .vk-content-row {
    min-height: 0;

    padding:
      21px 6px;

    grid-template-columns:
      46px
      minmax(0, 1fr);

    gap: 13px;
  }


  .vk-content-row:hover,
  .vk-content-row:focus-visible,
  .vk-content-row.is-active {
    padding-left: 13px;
  }


  .vk-content-number {
    font-size: 1.1rem;
  }


  .vk-content-row h3 {
    font-size: 1.12rem;
  }


  .vk-content-row p {
    font-size: 0.83rem;

    line-height: 1.58;
  }

}



/* ==========================================================
   430 PX
========================================================== */

@media (max-width: 430px) {

  .vk-hero,
  .vk-hero-inner {
    min-height: 845px;
  }


  .vk-hero-services {
    gap:
      16px 17px;
  }


  /* KARTENINHALT */

  .vk-preview-stage {
    min-height: 275px;

    padding:
      18px 9px;
  }


  .vk-preview-logo {
    padding: 4px;
  }


  .vk-preview-logo-image {
    max-height: 40px;
  }


  .vk-preview-person {
    padding: 4px;
  }


  .vk-preview-person strong {
    font-size: 0.61rem;
  }


  .vk-preview-person span {
    font-size: 0.34rem;
  }


  .vk-preview-contact {
    padding: 4px;
  }


  .vk-preview-contact span {
    font-size: 0.32rem;
  }


  .vk-preview-digital {
    padding: 4px;
  }


  .vk-preview-qr-image {
    width: 41px;

    height: 41px;

    border-width: 3px;
  }


  .vk-preview-digital small {
    font-size: 0.29rem;
  }


  /* ORIENTATION */

  .vk-orientation-card button {
    grid-template-rows:
      265px auto;
  }


  .vk-portrait {
    height: 205px;
  }


  /* MATERIAL */

  .vk-spec-panel {
    padding:
      28px 18px;
  }


  .vk-spec-animation strong {
    font-size:
      clamp(
        2.8rem,
        14vw,
        4.3rem
      );
  }


  .vk-spec-visual {
    min-height: 275px;
  }


  .vk-thickness-stack {
    width: 205px;

    height: 138px;
  }


  .vk-size-card {
    width: 205px;
  }


  .vk-size-width {
    width: 205px;
  }


  .vk-size-height {
    height: 135px;
  }


  .vk-sides-stage {
    width: 210px;
  }


  .vk-orientation-demo {
    width: 125px;

    height: 194px;
  }


  .vk-orientation-labels {
    gap: 18px;

    font-size: 0.50rem;
  }

}



/* ==========================================================
   14
   REDUZIERTE BEWEGUNG
========================================================== */

@media (prefers-reduced-motion: reduce) {

  .reveal {
    opacity: 1;

    transform: none;
  }


  .vk-changing-word,
  .vk-hero-service,
  .vk-preview-element,
  .vk-preview-card,
  .vk-orientation-object,
  .vk-print-card,
  .vk-spec-animation strong,
  .vk-spec-animation span,
  .vk-spec-animation p,
  .vk-spec-scene,
  .vk-thickness-stack span,
  .vk-thickness-line,
  .vk-size-card,
  .vk-size-width,
  .vk-size-width i,
  .vk-size-height,
  .vk-size-height i,
  .vk-sides-card,
  .vk-orientation-demo {
    transition-duration:
      0.01ms !important;

    animation-duration:
      0.01ms !important;

    animation-delay:
      0ms !important;
  }

}